<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>首页 - 华鑫农业后台管理系统后台管理系统</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/materialdesignicons.min.css" rel="stylesheet">
<link href="../css/style.min.css" rel="stylesheet">
  <script src="../js/myScript/app.js"></script>
  <script type="text/javascript" src="../js/jquery.min.js"></script>
<%--  <script type="text/javascript" src="../js/template-web.js"></script>--%>
</head>

<body>
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    <%--    菜单栏--%>
    <jsp:include page="left_nav.jsp"/>
    <%--头部--%>
    <jsp:include page="header.jsp"/>
      <script type="text/javascript">

        for (let i = 1; i <= 6; i++) {
          $("#nav" + i).attr("class", "nav-item");
        }
        $("#nav3").attr("class", "nav-item active");
      </script>

      <!--页面主要内容-->
      <main class="lyear-layout-content">

        <div class="container-fluid">

          <div class="row">
            <div class="col-lg-12">
              <div class="card">
                <div class="card-toolbar clearfix">

                  <%--                搜索功能的页面--%>
                  <form class="pull-right search-bar" method="get" action="#!" role="form">
                    <div class="input-group">
                      <div class="input-group-btn">
                        <input type="hidden" name="search_field" id="search-field" value="title">
                        <button class="btn btn-default dropdown-toggle" id="search-btn" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
                          内容 <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                          <li> <a tabindex="-1" href="javascript:void(0)" data-field="title">内容</a> </li>
                          <li> <a tabindex="-1" href="javascript:void(0)" data-field="cat_name">时间</a> </li>
                        </ul>
                      </div>
                      <input type="text" class="form-control" value="" name="keyword" placeholder="请输入名称">
                    </div>
                  </form>
                  <div class="toolbar-btn-action">
                    <a class="btn btn-primary m-r-5" href="#!" data-toggle="modal" data-target="#myModal"><i class="mdi mdi-plus" ></i> 新增</a>
                  </div>
                </div>
                <div class="card-body">

                  <div class="table-responsive">
                    <table class="table table-bordered">
                      <thead>
                      <tr>

                        <th>编号</th>
                        <th>农产品名称</th>
                        <th>分类</th>
                        <th>操作时间</th>
                        <th>操作</th>
                      </tr>
                      </thead>
                      <tbody id="tb_data">
                      </tbody>
                    </table>
                  </div>
                  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                          <h4 class="modal-title" id="myModalLabel">新增农产品</h4>
                        </div>
                        <div class="modal-body">
<%--                            模态框的内容展示，需要构建一个表单--%>
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="card">
                                        <div class="card-body">

                                            <form action="#!" method="post" class="row">

                                                <div class="form-group col-md-12">
                                                    <label for="productId">产品名称</label>
                                                    <input type="text" class="form-control" id="productId" name="title" value="" placeholder="请输入产品名称" />
                                                </div>

                        <%--                        分类start--%>
                                                <div class="form-group col-md-12">
                                                    <label for="type">分类</label>
                                                    <div class="form-controls">
                                                        <select name="type" class="form-control" id="type">
                                                            <option value="1">分类1</option>
                                                            <option value="2">分类2</option>
                                                            <option value="3">分类3</option>
                                                            <option value="4">分类4</option>
                                                        </select>
                                                    </div>
                                                </div>
                        <%--                        分类end--%>

                                                <div class="form-group col-md-12">
                                                    <label for="ptvalue">营养价值</label>
                                                    <input type="text" class="form-control" id="ptvalue" name="seo_keywords" value="" placeholder="营养价值" />
                                                </div>
                                                <div class="form-group col-md-12">
                                                    <label for="ptuse">功用</label>
                                                    <input type="text" class="form-control" id="ptuse" name="seo_keywords" value="" placeholder="功用" />
                                                </div>
                                                <div class="form-group col-md-12">
                                                    <label for="seo_description">产品介绍</label>
                                                    <textarea class="form-control" id="seo_description" name="seo_description" rows="5" value="" placeholder="产品介绍"></textarea>
                                                </div>
                                                <div class="form-group col-md-12">
                                                    <label>图片上传</label>
                                                    <div class="form-controls">

                                                        <ul class="list-inline clearfix lyear-uploads-pic">
                                                            <li class="col-xs-4 col-sm-3 col-md-2">
                                                                <figure>
                                                                    <img src="../images/gallery/15.jpg" alt="图片一">
                                                                    <figcaption>
                                                                        <a class="btn btn-round btn-square btn-primary" href="#!"><i class="mdi mdi-eye"></i></a>
                                                                        <a class="btn btn-round btn-square btn-danger" href="#!"><i class="mdi mdi-delete"></i></a>
                                                                    </figcaption>
                                                                </figure>
                                                            </li>
                                                            <li class="col-xs-4 col-sm-3 col-md-2">
                                                                <figure>
                                                                    <img src="../images/gallery/16.jpg" alt="图片二">
                                                                    <figcaption>
                                                                        <a class="btn btn-round btn-square btn-primary" href="#!"><i class="mdi mdi-eye"></i></a>
                                                                        <a class="btn btn-round btn-square btn-danger" href="#!"><i class="mdi mdi-delete"></i></a>
                                                                    </figcaption>
                                                                </figure>
                                                            </li>
                                                            <li class="col-xs-4 col-sm-3 col-md-2">
                                                                <figure>
                                                                    <img src="../images/gallery/17.jpg" alt="图片三">
                                                                    <figcaption>
                                                                        <a class="btn btn-round btn-square btn-primary" href="#!"><i class="mdi mdi-eye"></i></a>
                                                                        <a class="btn btn-round btn-square btn-danger" href="#!"><i class="mdi mdi-delete"></i></a>
                                                                    </figcaption>
                                                                </figure>
                                                            </li>
                                                            <li class="col-xs-4 col-sm-3 col-md-2">
                                                                <a class="pic-add" id="add-pic-btn" href="#!" title="点击上传"></a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-12">
                                                    <label for="ptprice">产品价格</label>
                                                    <input type="text" class="form-control" id="ptprice" name="seo_keywords" value="" placeholder="产品价格" />
                                                </div>
                                            </form>

                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                          <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addProducttem()">点击保存</button>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                          <h4 class="modal-title" id="myModalLabel2">更新公司简介</h4>
                        </div>
                        <div class="modal-body">
                          <textarea  class="form-control" id="example-textarea-updata" name="example-textarea-input" rows="6" placeholder="简介内容.."></textarea>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                          <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="">点击保存</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <%--                分页，先不实现--%>
                  <%--                <ul class="pagination">--%>
                  <%--                  <li class="disabled"><span>«</span></li>--%>
                  <%--                  <li class="active"><span>1</span></li>--%>
                  <%--                  <li><a href="#1">2</a></li>--%>
                  <%--                  <li><a href="#1">3</a></li>--%>
                  <%--                  <li><a href="#1">4</a></li>--%>
                  <%--                  <li><a href="#1">5</a></li>--%>
                  <%--                  <li><a href="#1">6</a></li>--%>
                  <%--                  <li><a href="#1">7</a></li>--%>
                  <%--                  <li><a href="#1">8</a></li>--%>
                  <%--                  <li class="disabled"><span>...</span></li>--%>
                  <%--                  <li><a href="#!">14452</a></li>--%>
                  <%--                  <li><a href="#!">14453</a></li>--%>
                  <%--                  <li><a href="#!">»</a></li>--%>
                  <%--                </ul>--%>

                </div>
              </div>
            </div>

          </div>

        </div>

      </main>
      <!--End 页面主要内容-->
  </div>
</div>


<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="../js/main.min.js"></script>
<script type="text/javascript">
  var resData;
  function qeuryAllProduct() {
    $.ajax({
      type: "get",
      async: true,
      url: serverUrl + "/product/queryProduct",
      dataType: "json",
      success: function (res) {
        if (res.success) {
          //请求成功
          resData = res.data;
          for (let i = 0; i < resData.length; i++) {
            var item = resData[i];

            $("#tb_data").append("<tr>\n" +
                    "                      <td id=\""+ item.ptId +"\">"+ item.ptId +"</td>\n" +
                    "                      <td>"+ item.ptName +"</td>\n" +
                    "                      <td>" + item.type.tsName + "</td>\n" +
                    "                      <td>" + item.ptTime + "</td>\n" +
                    "                      <td>\n" +
                    "                        <div class=\"btn-group\">\n" +
                    "                          <a id=\'"+ item.ptId +"\' class=\"btn btn-xs btn-default\" href=\"#!\" title=\"编辑\"  data-toggle=\"modal\" data-target=\"#myModal2\" onclick='upDataCompanyItem(this)'><i class=\"btn btn-sm btn-primary\">编辑</i></a>\n" +
                    "                          <a id=\'" + item.ptId + "\' class=\"btn btn-xs btn-default\" href=\"#!\" title=\"查看\" data-toggle=\"tooltip\" onclick='queryNews(this)'><i class=\"btn btn-sm btn-primary\">详情</i></a>\n" +
                    "                          <a id=\'"+ item.ptId +"\' class=\"btn btn-xs btn-default\" href=\"#!\" title=\"删除\" data-toggle=\"tooltip\" onclick='deleteProductItem(this)'><i class=\"btn btn-sm btn-danger\">删除</i></a>\n" +
                    "                        </div>\n" +
                    "                      </td>\n" +
                    "                    </tr>");

          }
        } else {
          alert(res.msg);
        }

      },
      error: function (res) {
        alert("请求出错");
      }
    });
  }

  //加载页面调用一次
  qeuryAllProduct();
  /**
   * 新增功能
   * @param cyId
   */
  function addProducttem() {
    //获取到text文本框内容
    var textData =  $("#example-textarea-input").val();
    //发送ajax请求
    $.ajax({
      type: "POST",
      contentType:"application/json;charset=UTF-8",
      url: serverUrl + "/company/addCompany",
      data: JSON.stringify({"cyMessage":textData}),
      dataType: "json",
      success: function (res) {
        if (res.success) {
          //清楚表，数据然后，调用ajax请求查询一次新数据
          $("#tb_data").empty();
          qeuryAllProduct();
        } else {
          alert(res.msg);
        }
      },
      error: function (res) {
        alert("请求出错");
      }
    });

    $("#example-textarea-input").val("");

  }

  /**
   * 修改指定的简介
   */
  function upDataCompanyItem(element) {
    //修改的id号
    var cyId = element.getAttribute("id");

    $.ajax({
      type: "GET",
      url: serverUrl + "/company/queryCompanyById?CyId=" + cyId,
      dataType: "json",
      success: function (res) {
        if (res.success) {
          $("#example-textarea-updata").val(res.data.cyMessage);
        } else {
          alert(res.msg);
        }
      },
      error: function (res) {
        alert("请求失败");
      }
    });
    // TODO 根据id进行更新操作

  }

  /**
   * 保存更新的数据
   */
  // TODO 没有后端接口，没有实现
  function onClickUpdata() {

  }
  /**
   * 删除选中的item
   */
  function deleteProductItem(element) {
    //修改的id号
    var cyId = element.getAttribute("id");
    $.ajax({
      type: "GET",
      url: serverUrl + "/product/deleteProduct?PtId=" + cyId,
      dataType: "json",
      success: function (res) {
        if (res.success) {
          //清楚表，数据然后，调用ajax请求查询一次新数据
          $("#tb_data").empty();
          qeuryAllProduct();
        }
      },
      error: function (res) {
        alert("请求出错");
      }
    });
  }
</script>
</body>
</html>
